<template>
  <div class="shaoapp-container">
    <div class="shaoboxfirst" style="font-size: 20px">
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      :showClose="false"
      width="80%"
      center>
      <div class="tanchu1">
        <el-card class="chicun">
          <div class="shaotitle">退单原因</div>
          <el-input class="shaoshuru" type="textarea" v-model="this.reason" :rows="1" resize="none"
                    placeholder="请输入退单原因" style="width: 99%;"></el-input>
          <el-button class="yuanyin" type="info" plain @click.prevent.stop.native="diancuo">点错</el-button>
          <el-button class="yuanyin" type="info" plain @click.prevent.stop.native="zhiliang">质量问题</el-button>
          <el-button class="yuanyin" type="info" plain @click.prevent.stop.native="qita">其它</el-button>
          <div class="shaodibu">
            <el-button class="yuanyin1" type="danger" plain @click.prevent.stop.native="quxiao">取消</el-button>
            <el-button class="yuanyin1" type="success" plain @click.prevent.stop.native="queding">确定</el-button>
          </div>
        </el-card>
      </div>
    </el-dialog>
    <!--中间主体部分-->
    <el-row>
      <el-col v-for="(item,index) in detailsList1234" :key="index" :span="24">
        <el-card style="width: 90%;margin-left: 5%;margin-top: 35px; border-radius: 20px;" shadow="always">

          <div style="display: flex; flex-direction: column;">
            <div style="display: flex;font-size: 40px">
              <el-row style="width: 100%">
                <el-col :span="3">
                  <div style="display: flex;  flex-direction: row; padding-right: 20px;">
                    <el-image :src="cardClass(item.projectCategory)" style="height: 80%;width:80%"></el-image>
                  </div>
                </el-col>
                <el-col :span="15">
                  <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div style="margin-top: 20px;">手牌号:{{ item.handBrand }}</div>
                    <div style="margin-top: 20px;">单价:{{ item.unitPrice }}元</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center;"> <!-- 剩余两个项目，并列显示 -->
                    <div style="display: flex; justify-content: flex-start; align-items: center;"> <!-- 录单员工居右 -->
                      <div>项目名称:{{ item.entryName }}</div>
                    </div>
                    <div style="display: flex; justify-content: flex-end; align-items: center;">
                      <div>个数:{{ item.quantity }}个</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <el-button style="float: left" class="add_btn9" type="danger" round
                             @click.prevent.stop.native="tuidan(item.id)" plain>退单
                  </el-button>

                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="width: 90%;margin-left: 5%;margin-top: 35px; border-radius: 20px;" shadow="always"
             v-if="detailsList1234.length==0" class="kong">
      该手牌未点单
    </el-card>
    <el-button plain type="primary" round
               style="font-size: 20px;width: 150px;height: 60px;margin-right: 5%;margin-top: 3%;margin-bottom: 3%; float:right"
               @click="back()">返回
    </el-button>
  </div>

</template>
<script>
import {listDetailstd, getDetails,  updateDetails1} from "@/api/module/yzx/details";

export default {
  name: "index1",
  dicts: ['yinhe_demo'],
  inject: ['reload'],
  data() {
    return {
      xiangxilist: [],
      centerDialogVisible: false,
      activeNames: ['1'],
      drawer: false,
      direction: 'ttb',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      reason: "",
      // 消费详细表格数据
      detailsList1234: [],
      detailsList1: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询消费详细表参数
      consumptiondetail1: {
        pageNum: 1,
        pageSize: 100,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: 1,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: '0',
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},

      activeIndex: '1',
      activeIndex2: '1'
    };
  },

  created() {
    this.getdetailsList();
    var A;
    A = this.$route.query.hb
    console.log(A);
  },
  methods: {
    queding() {
      this.xiangxilist.consumptionStatus = 1;
      this.xiangxilist.reasonForChargeback = this.reason;
      updateDetails1(this.xiangxilist).then(response => {
        this.$modal.msgSuccess("退单成功");
        this.reason = '';
        this.centerDialogVisible = false;
        this.reload();
      });
    },
    quxiao() {
      this.centerDialogVisible = false;
    },
    diancuo() {
      this.reason = "点错";
    },
    zhiliang() {
      this.reason = "质量问题";
    },
    qita() {
      this.reason = "其它";
    },
    cardClass() {
      return require(`../../../assets/icons/imageicon/34.png`); // 成功状态的颜色类名
    },
    tuidan(id) {
      getDetails(id).then(response => {
        this.xiangxilist = response.data;
      })
      this.centerDialogVisible = true;
    },

    back() {
      this.$router.push({path: "/jishi/jingliindex"});
    },
    // 查询项目信息表只查自己管辖范围内的
    getdetailsList() {
      this.consumptiondetail1.handBrand = this.$route.query.hb;
      this.consumptiondetail1.projectCategory = "02";
      this.loading = true;
      listDetailstd(this.consumptiondetail1).then(response => {
        this.detailsList1 = response.rows;
        this.detailsList1234.push(...this.detailsList1);
        this.total = response.total;
        this.loading = false;
      });
    },
  }
};
</script>
<style>
/*
.el-tabs__item{color:red ;}
*/
.shaoapp-container {
  border: 10px;
  border-bottom: #1e1e1e;
}

#tab-fourth {
  color: red;
}

#tab-fifth {
  color: #dada25;
}

#tab-sixth {
  color: green;
}

#tab-seventh {
  color: orange;
}

/* 样式穿透，修改组件库组件的样式 */
.el-tabs__item.is-top.is-active {
  /* v-bind可以绑定变量 */
  background-color: rgba(231, 226, 226, 0.77);
}


.shaoboxfirst {
  width: 100%;
  height: 40px;
}

.chicun {
  height: 400px;
}

.shaodibu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.add_btn9 {
  margin-top: 26px;
  min-width: 250px;
  min-height: 100px;
  font-size: 40px;
  margin-left: 50px;
}

.shaoshuru {
  margin-top: 5px;
  font-size: 40px;
}

.tanchu1 {
  margin-top: 50px;
  height: 400px;
}

.yuanyin {
  margin-top: 20px;
  width: 200px;
  height: 80px;
  font-size: 30px;
}

.yuanyin1 {
  margin-top: 30px;
  width: 200px;
  height: 80px;
  font-size: 30px;
}

.kong {
  height: 300px;
  line-height: 230px;
  text-align: center;
  font-size: 80px;
}

.shaotitle {
  font-size: 40px;
  text-align: center;
}

</style>

